<template>
  <div class="businessClosedLoop">
    <tabs
      :tabs-arr="tabsList"
      @returnIndex="getTabIndex" />
    <div
      class="infoList"
      style="margin-left:8px;">
      <ul>
        <li
          v-for="(item,index) in detailData"
          :key="index">
          <span>{{ item.name }}</span>
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.value"
            placement="top">
            <span>{{ item.value }}</span>
          </el-tooltip>
        </li>
      </ul>
      <ul v-if="tabIndex===0">
        <li
          v-for="(item,index) in saleInfo"
          :key="index">
          <span>{{ item.name }}</span>
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.value"
            placement="top">
            <span>{{ item.value }}</span>
          </el-tooltip>
        </li>
      </ul>
    </div>
    <!-- 订单信息 -->
    <div
      class="table"
      v-show="tabIndex===0">
      <el-editable
        :data="orderTableData"
        :columns="orderTableColumn"
        v-loading="orderLoading"
        height="200"
      />
    </div>
    <div
      class="table tableWrap"
      v-show="tabIndex===1">
      <div
        v-for="(item,index) in deliverTableData"
        :key="index">
        <div class="infoList">
          <ul>
            <li
              v-for="(item2,index) in item.deliverSaleInfo"
              :key="index">
              <span>{{ item2.name }}</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item2.value"
                placement="top">
                <span>{{ item2.value }}</span>
              </el-tooltip>
            </li>
          </ul>
          <ul>
            <li
              v-for="(item2,index) in item.operateInfo"
              :key="index">
              <span>{{ item2.name }}</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item2.value"
                placement="top">
                <span>{{ item2.value }}</span>
              </el-tooltip>
            </li>
          </ul>
        </div>
        <div :class="{'table':deliverTableData.length===1}">
          <el-editable
            :data="item.goodsList"
            :span-method="objectSpanMethod"
            :columns="deliverTableColumn"
            v-loading="deliverLoading"
            height="200"
          />
        </div>
      </div>
    </div>
    <!-- 订单信息/分页 -->
    <el-pagination
      v-if="tabIndex===0"
      class="pagination"
      @size-change="orderHandleSizeChange"
      @current-change="orderHandleCurrentChange"
      :current-page="orderPage.page"
      :page-sizes="PAGE_NUMBER"
      :page-size="orderPage.pageSize"
      :layout="PAGINATION_LAYOUT"
      :total="orderPage.total"
    />
  </div>
</template>

<script>
import tabs from '@components/tabs/tabTool'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import {
  hossynSasOrderYySasDeliveryOrderOrderDetail, // 获取国科订单详情信息
  hossynSasOrderYySasDeliveryOrderDeliveryOrderDetail, // 国科Sas订单发货详情信息
  hossynSasOrderYySasDeliveryOrderSasDeliveryOrderList
} from '@const/beforeSettleApi.js'
import ElEditable from '@components/el-editable'
import { hasIn } from 'lodash'
import { orderTableColumn, deliverTableColumn } from './const'

export default {
  components: { tabs, ElEditable },
  data () {
    return {
      tabIndex: 0,
      orderLoading: false,
      deliverLoading: false,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      tabsList: [ // 存在发货信息的订单，展示发货信息tab
        { label: '订单信息' }
        // { label: '发货信息' }
      ],
      detailData: [],
      orderDetailData: [],
      deliverDetailData: [],
      saleInfo: [],
      orderTableColumn,
      deliverTableColumn,
      orderTableData: [],
      deliverTableData: [],
      orderPage: {
        page: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  created () {
    this.detailData = this.orderDetailData
  },
  mounted () {
    this.initGlobalBtn()
    this.getOrderDetailList()// 订单信息
    this.getDeliveryOrderDetail()// 发货信息
  },
  methods: {
    initGlobalBtn (orderStatusStr = '') {
      let obj = {
        type: 'btn',
        arr: [
          {
            type: '',
            val: '返回',
            handle: this.goBack
          }
        ]
      }
      if (orderStatusStr && orderStatusStr !== '全部发货') {
        obj.arr.push(
          {
            type: 'primary',
            val: '录入发货信息', // 非全部发货的状态的订单详情页面，均有此按钮，点击进入录入发货信息页面
            handle: this.goDeliverInfo
          }
        )
      }
      this.$store.commit('changeLayoutHandle', obj)
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // row//表格每一行的数据
      // column//表格每一列的数据
      // rowIndex//表格的行索引,不包括表头,从0开始
      // columnIndex//表格的列索引,从0开始
      if (columnIndex === 0) { // “0”第一列，合并行
        if (row.rows >= 1) { // 超过一行的进行处理
          return {
            rowspan: row.rows, // 合并的行数
            colspan: 1 // 合并的列数
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    goBack () {
      this.$router.go(-1)
    },
    goDeliverInfo () {
      this.$router.push({
        path: '/distributorSide/businessClosedLoop/deliver',
        query: {
          id: this.$route.query.orderId
        }
      })
    },
    getTabIndex (index) {
      this.tabIndex = index
      if (index === 0) {
        this.detailData = this.orderDetailData
      } else {
        this.detailData = this.deliverDetailData
      }
    },
    getDeliveryOrderDetail () {
      this.deliverLoading = true
      this.$axios({
        method: 'post',
        url: hossynSasOrderYySasDeliveryOrderDeliveryOrderDetail,
        data: {
          orderId: this.$route.query.orderId
        }
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          if (data.length > 0) {
            this.tabsList.push(
              { label: '发货信息' }
            )
          }
          this.deliverTableData = data.map(item => {
            return {
              deliverSaleInfo: [
                {
                  name: '销售产品数量：',
                  value: item.orderDetailCount + ''
                },
                {
                  name: '品种数：',
                  value: item.productSpecCount + ''
                },
                {
                  name: '金额合计（元）：',
                  value: '￥' + item.orderTotalAmount + ''
                }
              ],
              operateInfo: [
                {
                  name: '本次发货时间：',
                  value: item.sendTime
                },
                {
                  name: '操作人：',
                  value: item.createdBy
                },
                {
                  name: '送货人：',
                  value: item.delConcatMan + ' ' + item.delConcatPhone
                }
              ],
              ...item
            }
          })
        })
        .finally(() => {
          this.deliverLoading = false
        })
    },
    getOrderDetailList () {
      this.orderLoading = true
      this.$axios({
        method: 'post',
        url: hossynSasOrderYySasDeliveryOrderOrderDetail,
        data: {
          orderId: this.$route.query.orderId,
          page: this.orderPage.page,
          pageSize: this.orderPage.pageSize
        }
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          this.orderTableData = data.sasProductList.content
          this.orderPage.total = data.sasProductList.totalElements
          this.initGlobalBtn(data.orderStatus) // 初始化按钮
          let saleInfo = [
            {
              name: '销售产品总数：',
              value: data.orderDetailCount + ''
            },
            {
              name: '品种数：',
              value: data.productSpecCount + ''
            },
            {
              name: '金额合计（元）：',
              value: '￥' + data.orderTotalAmount + ''
            }
          ]
          this.saleInfo = saleInfo
          let detailData = [
            {
              name: '国科订单号：',
              value: data.ebsOrderCode
            },
            {
              name: '医院订单号:',
              value: data.hospitalOrderCode
            },
            {
              name: '订单状态：',
              value: data.orderStatus
            },
            {
              name: '创建时间：',
              value: data.createdAt
            },
            {
              name: '供应商：',
              value: data.supplyName
            },
            {
              name: '收获地址：',
              value: data.receiverAddress
            },
            {
              name: '联系人：',
              value: data.concatMan
            },
            {
              name: '联系电话：',
              value: data.concatPhone
            }
          ]
          this.detailData = detailData
          this.orderDetailData = detailData
          // 发货信息
          let deliverDetailData = [
            {
              name: '配送商订单号：',
              value: data.ebsOrderCode
            },
            {
              name: '医院订单号：',
              value: data.hospitalOrderCode
            },
            {
              name: '订单状态：',
              value: data.orderStatus
            },
            {
              name: '创建时间：',
              value: data.createdAt
            },
            {
              name: '供应商：',
              value: data.supplyName
            },
            {
              name: '收获地址：',
              value: data.receiverAddress
            },
            {
              name: '联系人：',
              value: data.concatMan
            },
            {
              name: '联系电话：',
              value: data.concatPhone
            }
          ]
          this.deliverDetailData = deliverDetailData
        })
        .finally(() => {
          this.orderLoading = false
        })
    },
    orderHandleSizeChange (pageSize) {
      this.orderPage.pageSize = pageSize
      this.getOrderDetailList()
    },
    orderHandleCurrentChange (page) {
      this.orderPage.page = page
      this.getOrderDetailList()
    }
  }
}
</script>

<style lang="less">
.businessClosedLoop {
  .infoList {
    background: #fff;
    ul {
      display: flex;
      flex-wrap: wrap;
      margin: 8px;
      li {
        margin: 8px 30px 8px 0;
        width: 295px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .tableWrap {
    > div {
      margin-bottom: 30px;
    }
  }
  .table {
    flex: 1;
    height: 400px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: #fff;
  }
  .pagination {
    text-align: right;
  }
}
</style>
